<template>
    <div class="main-container">
        <global />
        <div class="main-content">
            <div class="content-container">
                <div class="service-manage">
                    <div class="header">
                        <!-- 新增搜索和筛选组件 -->
                        <el-input v-model="searchQuery" placeholder="请输入需要搜索的学生学号"
                            style="width: 200px; margin-right: 10px;"></el-input>
                        <el-button type="primary" @click="Page">搜索</el-button>
                    </div>
                    <el-table :data="warns" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column label="学生学号" prop="ssid"></el-table-column>
                        <el-table-column label="学生姓名" prop="sname" width="120"></el-table-column>
                        <el-table-column label="预警时间" prop="taCreatetime"></el-table-column>
                        <el-table-column label="预警类型">
                            <template #default="scope">
                                <el-tag type="info">{{ scope.row.tsType === 1 ? '学习预警' :
                                    scope.row.tsType === 2 ? '心理预警' : '智能预警' }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="预警等级" width="100">
                            <template #default="scope">
                                <el-tag type="danger">
                                    {{ scope.row.taLevel === 4 ? '严重' : '未知' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="处理状态" width="100">
                            <template #default="scope">
                                <el-tag :type="scope.row.taStatus === 1 ? 'danger' : 'success'">
                                    {{ scope.row.taStatus === 1 ? '未处理' : '已通知' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="预警次数" prop="taCount" width="100"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button size="small" @click="openViewDialog(scope.row)">查看</el-button>
                                <el-button size="small" type="danger"
                                    @click="openWarnDialog(scope.row)">提醒学生</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 查看预警详情弹窗 -->
                    <el-dialog v-model="viewDialogVisible" title="预警详情" width="60%"> <!-- 适当增大弹窗宽度 -->
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form :model="viewWarnData" label-width="100px">
                                    <el-form-item label="学生学号：">
                                        <span>{{ viewWarnData.ssid }}</span>
                                    </el-form-item>
                                    <el-form-item label="学生姓名：">
                                        <span>{{ viewWarnData.sname }}</span>
                                    </el-form-item>
                                    <el-form-item label="学生专业：">
                                        <span>{{ viewWarnData.sspecialized }}</span>
                                    </el-form-item>
                                    <el-form-item label="学生年级：">
                                        <span>{{ viewWarnData.sgrade }}</span>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col>
                                <el-form :model="viewWarnData" label-width="100px">
                                    <el-form-item label="预警内容：">
                                        <span>{{ viewWarnData.taContent }}</span>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                        <template #footer="scope">
                            <el-button @click="viewDialogVisible = false">关闭</el-button>
                        </template>
                    </el-dialog>

                    <el-dialog v-model="warnDialogVisible2" title="提醒学生" width="60%">
                        <el-row :gutter="20">
                            <!-- 左侧原有信息列 -->
                            <el-col :span="12">
                                <div>
                                    <h4>评估结果</h4>
                                    <p>评估类型：{{ viewWarnData.tAssess.tsType == 1 ? '学习评估' :
                                        viewWarnData.tAssess.tsType == 2 ? '心理评估' : '智能评估' }}</p>
                                    <p>评估得分：{{ viewWarnData.tAssess.tsScore }}</p>
                                    <p>评估等级：{{ viewWarnData.tAssess.tsLevel == 4 ? '预警' : '关注' }}</p>
                                    <p>评估描述：{{ viewWarnData.tAssess.tsContent }}</p>
                                </div>
                                <div>
                                    <h4>学习态度</h4>
                                    <p>分数：{{ viewWarnData.sAttitude.saScore }}</p>
                                    <p>内容：{{ viewWarnData.sAttitude.saAcontent }}</p>
                                    <p>计划：{{ viewWarnData.sAttitude.saPlan }}</p>
                                </div>
                                <div>
                                    <h4>学习效果</h4>
                                    <p>分数：{{ viewWarnData.sEffect.seScore }}</p>
                                    <p>内容：{{ viewWarnData.sEffect.seContent }}</p>
                                    <p>建议：{{ viewWarnData.sEffect.seAdvice }}</p>
                                </div>
                                <div>
                                    <h4>学习习惯</h4>
                                    <p>频率：{{ viewWarnData.sHabit.shFrequency }}</p>
                                    <p>内容：{{ viewWarnData.sHabit.shHcontent }}</p>
                                    <p>时长：{{ viewWarnData.sHabit.shDuration }}</p>
                                </div>
                                <div>
                                    <h4>综合成绩</h4>
                                    <p>成绩：{{ viewWarnData.sGrades.sgGrades }}</p>
                                    <p>学期：{{ viewWarnData.sGrades.sgSemester }}</p>
                                    <p>评价：{{ viewWarnData.sGrades.sgTappraise }}</p>
                                </div>
                            </el-col>
                            <!-- 右侧新增输入框列 -->
                            <el-col :span="12">
                                <!-- 第一个输入框替换为下拉选择框 -->
                                <el-select v-model="tap.tapLevel" placeholder="请选择提示等级" style="margin-bottom: 20px;">
                                    <el-option label="中度预警" value="1"></el-option>
                                    <el-option label="重度预警" value="2"></el-option>
                                </el-select>

                                <!-- 第二个输入框改为可拉伸的文本域 -->
                                <el-input v-model="tap.tapContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                                    placeholder="请输入建议内容"></el-input>
                            </el-col>
                        </el-row>
                        <template #footer>
                            <el-button @click="warnDialogVisible2 = false">关闭</el-button>
                            <el-button @click="sendWarn">发送</el-button>
                        </template>
                    </el-dialog>

                    <!-- 分页组件 -->
                    <div class="pagination-container">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                            :total="total" class="pagination" @current-change="Page" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue';
import {getSessionStorage} from '@/router/common'
import { ElMessage } from 'element-plus'
// 暂时注释掉无法解析的导入
// import Global from '../components/Global.vue'; 
import axios from '@/router/axios'
export default {
    components: {
        // 暂时注释掉组件注册
        // Global
    },
    setup() {
        const state = reactive({
            // 分页相关
            currentPage: 1,
            pageSize: 10,
            total: 1000,
            warns: [],
            warnForm: {
                type: '',
                studentName: '',
                time: '',
                content: '',
                status: 0,
                grade: '',
                major: '',
                age: '' // 新增年龄字段
            },
            multipleSelection: [],
            searchQuery: '',
            selectedGrade: '',
            selectedMajor: '',
            selectedVisualization: '',
            dialogVisible: false,
            viewWarnData: {
                tAssess: {
                    tsType: 0,
                    tsScore: 0,
                    tsLevel: 0,
                    tsContent: "未查询到相关记录",
                },
                sAttitude: {
                    saScore: 0,
                    saAcontent: "未查询到相关记录",
                    saPlan:"未查询到相关记录"
                },
                sEffect: {
                    seScore: 0,
                    seContent: "未查询到相关记录",
                    seAdvice: "未查询到相关记录"
                },
                sHabit: {
                    shFrequency:"未查询到相关记录",
                    shHcontent: "未查询到相关记录",
                    shDuration: "未查询到相关记录"
                },
                sGrades: {
                    sgGrades: 0,
                    sgSemester: "未查询到相关记录",
                    sgAppraise: "未查询到相关记录"
                }
            }, // 存储查看的预警数据
            tap: {
                tapContent: '',
                tapId: '',
                tapLevel: '',
                tapSaid: '',
                tapSeid: '',
                tapSgid: '',
                tapShid: '',
                tapSid: '',
                tapTaid: '',
                tapTid: getSessionStorage("teacher").tTid,
                tapTime: '',
                tapTsid: ''
            },
            viewDialogVisible: false, // 控制查看弹窗显示状态
            warnDialogVisible2: false // 控制提醒学生弹窗显示状态
        });
        Page();
        function Page() {
            console.log(state.currentPage)
            console.log(state.pageSize)
            console.log(state.searchQuery)
            axios.get('/api/teacher/talert/gettAlertList', {
                params: {
                    page: state.currentPage,
                    pageSize: state.pageSize,
                    SSid: state.searchQuery
                }
            }).then(res => {
                const result = res.data;
                console.log(result)
                if (result.code == 1) {
                    state.warns = result.data.records;
                    state.total = result.data.total;
                }
            })
        }

        const handleSelectionChange = (val) => {
            state.multipleSelection = val;
        };

        const submitForm = () => {
            // 提交表单逻辑
            state.dialogVisible = false;
            // 清空表单
            state.warnForm = {
                type: '',
                studentName: '',
                time: '',
                content: '',
                status: 0,
                grade: '',
                major: ''
            };
        };

        const openVisualizationDialog = () => {
            if (state.selectedVisualization) {
                state.visualizationDialogVisible = true;
            }
        };

        const openViewDialog = (warn) => {
            state.viewWarnData = warn; // 设置查看的预警数据
            state.viewDialogVisible = true; // 打开查看弹窗
        };

        function openWarnDialog(warn) {
            state.warnDialogVisible2 = true;
            state.tap.tapSid = warn.ssid;
            state.tap.tapTaid = warn.taId;
            axios.get('/api/teacher/talertreport/getAlertReport', {
                params: {
                    sGrade: warn.sgrade,
                    sName: warn.sname,
                    sSid: warn.ssid,
                    sSpecialized: warn.sspecialized,
                    tsType: warn.tsType,
                }
            }).then(res => {
                const result = res.data;
                console.log(result)
                if (result.code == 1) {
                    state.viewWarnData = result.data;
                    state.tap.tapSaid = result.data.sAttitude.saId;
                    state.tap.tapSeid = result.data.sEffect.seId;
                    state.tap.tapSgid = result.data.sGrades.sgId;
                    state.tap.tapShid = result.data.sHabit.shId;
                    state.tap.tapTsid = result.data.tAssess.tsId;
                }
            })
        }
        function sendWarn() {
            if(state.tap.tapContent == '' || state.tap.tapLevel == ''){
                ElMessage.warning('请填写完整');
                return;
            }
            axios.post('/api/teacher/talertreport/addAlertReport', state.tap).then(res => {
                const result = res.data;
                console.log(result)
                if (result.code == 1) {
                    ElMessage.success('发送成功')
                    state.warnDialogVisible2 = false;
                    state.tap.tapContent = '';
                    state.tap.tapId = '';
                    state.tap.tapLevel = '';
                    state.tap.tapSaid = '';
                    state.tap.tapSeid = '';
                    state.tap.tapSgid = '';
                    state.tap.tapShid = '';
                    state.tap.tapSid = '';
                    state.tap.tapTaid = '';
                    state.tap.tapTime = '';
                    state.tap.tapTsid = ''
                    Page();
                }else{
                    ElMessage.error('发送失败')
                }
            })
        }

        return {
            ...toRefs(state),
            handleSelectionChange,
            submitForm,
            openVisualizationDialog,
            openViewDialog, // 导出打开查看弹窗方法
            Page,
            openWarnDialog,
            sendWarn
        };
    }
};
</script>

<style scoped>
.header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.warn-page .content-container {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

.main-content {
    margin-left: 220px;
    margin-top: 60px;
    width: calc(100% - 220px);
    height: calc(100vh - 60px);
    overflow: auto;
}

.content-container {
    padding: 20px;
    min-height: calc(100% - 40px);
}

.main-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.sidebar {
    width: 220px;
    background-color: #545c64;
    color: white;
    height: 100vh;
    position: fixed;
    left: 0;
    overflow-y: auto;
}

.logo {
    text-align: center;
    padding: 20px 0;
    color: #fff;
    margin: 0;
}

.nav-menu {
    border-right: none;
}

.top-bar {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: fixed;
    top: 0;
    right: 0;
    left: 220px;
    /* 与侧边栏宽度一致 */
    z-index: 100;
}

.left-section {
    display: flex;
    align-items: center;
}

.welcome-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.right-section {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.username {
    margin-left: 10px;
    font-size: 14px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
}
</style>